<template>
	<view class="content view">
		<!-- 声明公告 -->
		<!-- 
		showIcon	Boolean	false	是否显示左侧喇叭图标
		showClose	Boolean	false	是否显示左侧关闭按钮
		speed	Number	100	文字滚动的速度，默认100px/秒
		 -->
		<!-- 		<view class="gongGao_fa">
			<uni-notice-bar class="gongGao" scrollable single :showIcon="true" :showClose="true" :speed="60"
				text="此小程序为我个人练习项目,视频如有侵权,请联系我下架该视频,联系方法可通过本人邮箱:1964748879@qq.com"></uni-notice-bar>
		</view> -->

		<!-- 头部 -->
		<!-- 	<view class="header_top view">
			<image class="image1 image" src="https://yy.dx1126.cn/images/caidan.png" mode=""></image>
			<text class="text1 text">发现</text>
			<image class="image1 image" src="https://yy.dx1126.cn/images/sousuo.png" mode=""></image>
		</view> -->
		<!-- 视频轮播 -->
		<!-- 
		 scroll-y	Boolean	false	允许纵向滚动
		 scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
		 scroll-top	Number/String		设置竖向滚动条位置
		 @touchend  触摸后放开触发
		 @scroll  滚动条事件，可以获取滚动条高度
		 -->
		<scroll-view class="videoBox view" :scroll-with-animation="true" @scroll="shuaDwon" @touchend="touchend"
			:scroll-top="scrollTop" :scroll-y="scrollBob">
			<!--
			 autoplay	Boolean	false	是否自动播放
			 danmu-list	Object Array		弹幕列表
			 @error 视频报错触发
			 page-gesture	Boolean	false	在非全屏模式下，是否开启亮度与音量调节手势
			 vslide-gesture	Boolean	false	在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture）
			 @ended	EventHandle		当播放到末尾时触发 ended 事件
			 loop   是否循环播放
			 show-fullscreen-btn	Boolean	true	是否显示全屏按钮
			 show-play-btn	Boolean	true	是否显示视频底部控制栏的播放按钮
			 show-center-play-bt n	Boolean	true	是否显示视频中间的播放按钮
			 object-fit	String	contain	当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖
			 direction	Number		设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）
			 -->
			<view class="view videoss" v-for="(item,index) in videos" :key="item.videoSrc" id='myElement'
				@touchmove="opChan">
				<!-- 加载  暂停 -->
				<image src="https://yy.dx1126.cn/images/boFang.png" class="zhanting image" v-show="!item.zanShow">
				</image>
				<button :loading="item.loadShow" class="loads"></button>
				<!-- 视频 -->
				<video class="video1" @click.stop="plays(index,item.pingShow,item.videoSrc)" :id="item.videoSrc"
					:src="item.videoSrc" :loop="true" @error="videoErrorCallback" :show-fullscreen-btn="false"
					:show-play-btn="false" :show-center-play-btn="false" object-fit="contain" :controls="false"
					@waiting='warin(index)' @loadeddata="locals(index,item.videoSrc)" @timeupdate='contiue(index)'
					@pause="contiue(index)">
				</video>
				<!-- 底部标题 -->
				<view class="videos_text view" v-if="!item.pingShow" @click="pingLun(index)"
					:style="{display:opacityBobs?'none':'flex'}">
					<text class="text2 text">@{{item.nickname}}</text>
					<text class="text2 text" :user-select="true">{{item.content}}</text>
				</view>

				<!-- 右部点赞 -->
				<view class="videos_right view" v-if="!item.pingShow" :style="{display:opacityBobs?'none':'flex'}">
					<view class="touX view2 view" @click="toUsers(item.username)">
						<image class="image6 image5 image" :src="item.src" mode=""></image>
						<!-- 关注 -->
						<view class="touX_jia view" @click.stop="guanZhu(item.username)"
							:class="{'opacitys':!item.guanShow}" v-if="!(item.username == userItem.username)">
							<image src="https://yy.dx1126.cn/images/jia.png" class="text4 text" v-show="item.guanShow">
							</image>
							<image src="https://yy.dx1126.cn/images/dui.png" class="text4 text" v-show="!item.guanShow">
							</image>
						</view>
						<!-- 本人 -->
						<view class="touX_jia1 view" v-if="item.username == userItem.username">
							<image src="https://yy.dx1126.cn/images/vip.png">
							</image>
						</view>
					</view>
					<!-- 点赞 -->
					<view class="zan view2 view">
						<image class="image5 image" src="https://yy.dx1126.cn/images/yidianzan.png" mode=""
							v-show="item.likeShow" @click="dianZhan(index)">
						</image>
						<image class="image5 image" src="https://yy.dx1126.cn/images/yidianzan-copy.png" mode=""
							v-show="!item.likeShow" @click="dianZhan(index)"></image>
						<text class="text6 text">{{item.like}}</text>
					</view>
					<!-- 评论 -->
					<view class="ping view2 view">
						<image class="image5 image" src="https://yy.dx1126.cn/images/pinglun-tianchong.png" mode=""
							@click="pingLun(index)">
						</image>
						<text class="text6 text">{{pings.filter(items=>items.token==item.videoSrc).length}}</text>
					</view>
					<!-- 收藏 -->
					<view class="shou view2 view">
						<image class="image5 image" src="https://yy.dx1126.cn/images/shoucang.png" mode=""
							v-show="item.collectShow" @click="shouCang(index)">
						</image>
						<image class="image5 image" src="https://yy.dx1126.cn/images/shoucangxuanzhong-copy.png" mode=""
							v-show="!item.collectShow" @click="shouCang(index)">
						</image>
						<text class="text6 text">{{item.collect}}</text>
					</view>
					<!-- 转发 -->
					<button class="zhuan" open-type="share">
						<image class="image3" src="https://yy.dx1126.cn/images/arrow-.png" mode=""></image>
						<text class="text3">分享</text>
					</button>
					<!-- 下载视频 -->
					<view class="shou view2 view" style="margin-top: 20rpx;" @click="xiaZaiVideo(item.videoSrc)">
						<image class="image5 image" src="../../public/images/xia.png">
						</image>
						<text class="text6 text">下载</text>
					</view>

				</view>

				<!-- 评论框 -->
				<view class="footer_ping view" :style="{height:item.pingShow?'700rpx':''}">
					<text class="nums view">{{pings.filter(items=>items.token==item.videoSrc).length}}条评论</text>



					<!-- 评论 -->
					<view class="ping_box">
						<!-- 作者评论 -->
						<view class="footer_ping_text view">
							<view class="image_view view">
								<image :src="item.src" class="image"></image>
							</view>
							<view class="text_view view">
								<view class="text_view_top view">
									<text class="text_name text">{{item.nickname}}</text>
									<text class="text_autor text">作者</text>
								</view>
								<view class="text_view_footer view">
									<text class="content_text text" :user-select="true">{{item.content}}</text>
								</view>
							</view>
						</view>

						<!-- 别人评论 -->
						<view class="footer_ping_text view"
							v-for="(itemP,indexP) in pings.filter(items=>items.token==item.videoSrc)" :key="itemP.id">
							<view class="image_view view">
								<image :src="itemP.src" class="image"></image>
							</view>
							<view class="text_view view">
								<view class="text_view_top view">
									<text class="text_name text">{{itemP.nickname}}</text>
									<text class="text_autor text" v-show="itemP.nickname == item.nickname">作者</text>
								</view>
								<view class="text_view_footer view">
									<text class="content_text text" :user-select="true">{{itemP.content}}</text>
								</view>
							</view>
						</view>
					</view>

					<!-- 发表评论 -->
					<view class="setPing">
						<input class="uni-input" :value="setPingText" @input="setPingStyle" placeholder="发表友爱评论"
							:style="{width:setPingBob?'100%':''}"
							@confirm="setPing(item.videoSrc,item.nickname,item.src)" />
						<button v-show="!setPingBob" @click="setPing(item.videoSrc,item.nickname,item.src)">发送</button>
					</view>
				</view>

			</view>
		</scroll-view>

		<!-- 底部导航 -->
		<Footer></Footer>

	</view>
</template>
<script setup>
	import Footer from "../../template/Footer/Footer.vue"
	// 防抖
	import debounce from "../../utils/debounce.js"

	import {
		ref,
		onBeforeUnmount,
		getCurrentInstance,
		onMounted,
		nextTick
	} from 'vue'
	import {
		useIndexStore
	} from '@/store/pinia.js';
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'

	let store = useIndexStore()

	let userItem = ref(store.userItem)

	// 下载视频
	const xiaZaiVideo = (url) => {
		// 获取存入相册的权限
		uni.authorize({
			scope: 'scope.writePhotosAlbum',
			success() {
				// 将视频存入相册
				uni.saveVideoToPhotosAlbum({
					// 文件路径
					filePath: url,
					success: function() {
						uni.showToast({
							title: '下载成功',
							duration: 2000
						});
					},
					fail: (e) => {
						uni.showToast({
							title: '不能下载示例,下载失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			fail: () => {
				uni.showToast({
					title: '没有权限,下载失败',
					icon: 'error',
					duration: 2000
				});
			}
		})
	}

	// 跳转个人信息详情页
	const toUsers = (username) => {
		uni.navigateTo({
			url: "/pages/users/users?username=" + username
		})
	}

	let that = getCurrentInstance()
	//视频数据
	let videoMysql = ref(store.videoMysql)
	// 评论
	let pings = ref(store.pings)

	// 显示的视频数据固定为3
	let videos = ref([])
	let videoLeft = ref(0)
	let videoRight = ref(videoLeft.value + 3)
	videos.value = videoMysql.value.slice(videoLeft.value, videoRight.value)



	// 获取元素的高度
	let videoHeight = ref(0)
	const query = wx.createSelectorQuery();
	query.select('#myElement').boundingClientRect((res) => {
		videoHeight.value = res.height
	}).exec();



	// 滚动条显示高度
	let scrollTop = ref(0)
	// 解决滚动条高度只有一次生效的变量
	let oldTop = ref({
		scrollTop: 0
	})
	// 滚动条高度
	let scrollHeight = ref(0)

	// 控制视频滚动
	let scrollBob = ref(true)
	// 控制底部标题和右部点赞的透明度
	let opacityBobs = ref(false)
	const opChan = () => {
		// 透明
		opacityBobs.value = true
	}

	// 滑动屏幕 滚动条事件
	const shuaDwon = e => {
		// 滚动条高度赋值，用于判断
		scrollHeight.value = e.detail.scrollTop
		// 记录组件内部变化的值，在设置新值之前先设置为记录的当前值，防止设置滚动条位置不生效
		oldTop.value.scrollTop = e.detail.scrollTop
	}


	// 封装播放函数，屏幕显示什么就播放什么视频

	const pause = (indexs) => {
		videos.value.forEach((item, index) => {
			if (index != indexs) {
				// 获取视频元素的API,item.videoSrc为视频标签的id名  pause()暂停  play()播放
				uni.createVideoContext(item.videoSrc).pause()
			} else {
				uni.createVideoContext(item.videoSrc).play()
				item.zanShow = true
			}
		})
	}

	onReady(() => {
		// 默认播放第一个
		setTimeout(() => {
			pause(0)
		}, 300)
	})


	// 设置全屏点击暂停时，不触发滑动事件
	let palyBob = ref(false)

	// 全屏点击播放或者暂停
	const plays = debounce((indexs, pingShow, id) => {
		if (pingShow) {
			videos.value.forEach((item, index) => {
				if (index == indexs) {
					item.pingShow = false
					// 开启视频滚动
					scrollBob.value = true
				}
			})
		} else {
			videos.value.forEach((item, index) => {
				if (index == indexs) {
					if (item.zanShow) {
						uni.createVideoContext(id).pause()
						item.zanShow = false
						// 不触发滚动事件
						palyBob.value = true
						// scrollBob.value = false
					} else {
						uni.createVideoContext(id).play()
						item.zanShow = true
						// 触发滚动事件
						palyBob.value = false
						// scrollBob.value = true
					}
				}
			})

		}

	}, 200)



	// 判断视频是否滚动到一半 
	// 显示的子元素
	const touchend = () => {
		// 0   videoHeight.value  videoHeight.value*2 scrollHeight.value 
		// 第一层上半层
		// 设置全屏点击暂停时，不触发滑动事件
		if (scrollHeight.value > 0 && scrollHeight.value <= videoHeight.value / 2) {
			// 判断是否是当前视频列表的第一个
			if (videoLeft.value - 1 < 0) {
				// 动态加载视频列表，只渲染3个
				videoLeft.value = 0
				videoRight.value = videoLeft.value + 3
				videos.value = videoMysql.value.slice(videoLeft.value, videoRight.value)
				// 将设置滚动条高度显示视频的逻辑放入异步队列，实现先加载视频，在设置位置，错开时间，防止视频抖动
				setTimeout(() => {
					scrollTop.value = oldTop.value.scrollTop
					nextTick(() => {
						scrollTop.value = 0
					})
					setTimeout(() => {
						if (!palyBob.value) {
							pause(0)
						}
					})
				})

			} else {
				videoLeft.value = videoLeft.value - 1
				videoRight.value = videoLeft.value + 3
				videos.value = videoMysql.value.slice(videoLeft.value, videoRight.value)
				// 将设置滚动条高度显示视频的逻辑放入异步队列，实现先加载视频，在设置位置，错开时间，防止视频抖动
				setTimeout(() => {
					scrollTop.value = oldTop.value.scrollTop
					nextTick(() => {
						scrollTop.value = videoHeight.value
					})
					setTimeout(() => {
						if (!palyBob.value) {
							pause(1)
						}
					})
				})

			}
			// 下半部
		} else if (scrollHeight.value > videoHeight.value / 2 && scrollHeight.value <= videoHeight.value) {
			scrollTop.value = oldTop.value.scrollTop
			nextTick(() => {
				scrollTop.value = videoHeight.value
			})
			setTimeout(() => {
				if (!palyBob.value) {
					pause(1)
				}
			})
			// 第二层的上半部
		} else if (scrollHeight.value > videoHeight.value && scrollHeight.value <= (videoHeight.value + videoHeight
				.value / 2)) {
			scrollTop.value = oldTop.value.scrollTop
			nextTick(() => {
				scrollTop.value = videoHeight.value
			})
			setTimeout(() => {
				if (!palyBob.value) {
					pause(1)
				}
			})
			// 第二层的下半部
		} else if (scrollHeight.value > (videoHeight.value + videoHeight.value / 2) && scrollHeight.value <=
			videoHeight.value * 2) {
			if (videoLeft.value + 1 > videoMysql.value.length - 3) {
				videoLeft.value = videoMysql.value.length - 3
				videoRight.value = videoLeft.value + 3
				videos.value = videoMysql.value.slice(videoLeft.value, videoRight.value)
				// 将设置滚动条高度显示视频的逻辑放入异步队列，实现先加载视频，在设置位置，错开时间，防止视频抖动
				setTimeout(() => {
					scrollTop.value = oldTop.value.scrollTop
					nextTick(() => {
						scrollTop.value = videoHeight.value * 2
					})
					setTimeout(() => {
						if (!palyBob.value) {
							pause(2)
						}
					})
				})

			} else {
				videoLeft.value = videoLeft.value + 1
				videoRight.value = videoLeft.value + 3
				videos.value = videoMysql.value.slice(videoLeft.value, videoRight.value)
				// 将设置滚动条高度显示视频的逻辑放入异步队列，实现先加载视频，在设置位置，错开时间，防止视频抖动
				setTimeout(() => {
					scrollTop.value = oldTop.value.scrollTop
					nextTick(() => {
						scrollTop.value = videoHeight.value
					})
					setTimeout(() => {
						if (!palyBob.value) {
							pause(1)
						}
					})
				})

			}
		}
		// 透明
		opacityBobs.value = false
	}



	// 关注
	let guanZhu = (username) => {
		videoMysql.value.forEach((item, index) => {
			if (item.username == username) {
				item.guanShow = false
			}
		})
		store.addGuan(username)
	}

	// 点赞
	const dianZhan = (indexs) => {
		videos.value.forEach((item, index) => {
			if (index == indexs) {
				item.likeShow = !item.likeShow
				if (item.likeShow) {
					item.like--
					store.removeLike(item.videoSrc, 0)
				} else {
					item.like++
					store.setLike(item.videoSrc)
				}
			}
		})
	}


	// 收藏
	const shouCang = (indexs) => {
		videos.value.forEach((item, index) => {
			if (index == indexs) {
				item.collectShow = !item.collectShow
				if (item.collectShow) {
					item.collect--
					store.removeShou(item.videoSrc, 0)
				} else {
					item.collect++
					store.setShou(item.videoSrc)
				}
			}
		})
	}

	// 评论
	const pingLun = (indexs) => {
		videos.value.forEach((item, index) => {
			if (index == indexs) {
				item.pingShow = !item.pingShow
			}
		})
		scrollBob.value = false
	}


	// 输入框文字
	let setPingText = ref('')
	// 发送评论输入框样式
	let setPingBob = ref(true)
	// 双向绑定
	const setPingStyle = (e) => {
		setPingText.value = e.target.value
		if (setPingText.value.trim() == '') {
			setPingBob.value = true
		} else {
			setPingBob.value = false
		}
	}
	// 发送评论
	const setPing = (token, nickname, src) => {
		let id = pings.value.length + Math.floor(Math.random() * 10000 + 1)
		if (setPingText.value.trim() == '') {
			return
		}
		let obj = {
			id,
			nickname,
			src,
			token,
			content: setPingText.value
		}
		store.setStorageP(obj)
		setPingText.value = ''
		setPingBob.value = true
	}

	// 视频错误时触发
	const videoErrorCallback = () => {
		uni.showModal({
			content: "视频加载出错",
			showCancel: false
		})
	}
	// 视频出现缓冲
	const warin = (indexs) => {
		videos.value.forEach((item, index) => {
			if (index == indexs) {
				item.loadShow = true
			}
		})
	}
	// 视频资源开始加载时
	const locals = (indexs, id) => {
		videos.value.forEach((item, index) => {
			if (index == indexs) {
				item.loadShow = true;
			}
		})
	}
	// 继续播放，或者暂停播放
	const contiue = (indexs) => {
		videos.value.forEach((item, index) => {
			if (index == indexs) {
				item.loadShow = false
			}
		})
	}
</script>

<style lang="less">
	page {
		background-color: black;
	}

	.gongGao_fa {
		position: fixed;
		width: 90%;
		height: 84rpx;
		top: 8%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10000;

	}

	.content {
		width: 750rpx;
		height: 100%;

		// 头部
		.header_top {
			width: calc(100% - 180rpx);
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			top: 50rpx;
			z-index: 10;

			.image1 {
				width: 50rpx;
				height: 50rpx;
				margin: 0 30rpx;
			}

			.text1 {
				color: white;
			}
		}


		// 视频
		.videoBox {
			width: 100%;
			height: calc(100% - 100rpx);
			overflow: auto;
			transition: all 0.5s ease-in-out;
			scroll-behavior: smooth;

			.videoss {
				width: 100%;
				height: 100%;
				position: relative;
				transition: all 0.5s ease-in-out;

				// 暂停  加载
				.zhanting {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 100rpx;
					height: 100rpx;
					opacity: 0.5;
					z-index: 5;
				}

				// 加载
				.loads {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					background-color: transparent;
					z-index: 5;
				}

				// 视频
				.video1 {
					width: 100%;
					height: 100%;
					transition: all 0.5s ease-in-out;
				}

				// 底部标题
				.videos_text {
					position: absolute;
					bottom: 30rpx;
					left: 30rpx;
					width: calc(100% - 200rpx);
					display: flex;
					flex-direction: column;
					transition: all 0.1s ease-in-out;

					.text2 {
						color: white;
					}

					.text2:nth-child(1) {
						font-weight: 600;
						font-size: 34rpx;
					}

					.text2:nth-child(2) {
						font-size: 28rpx;
						max-height: 80rpx;
						overflow: auto;
					}
				}

				// 右侧点赞
				.videos_right {
					width: 100rpx;
					height: 750rpx;
					position: absolute;
					right: 10rpx;
					bottom: 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					color: white;
					align-items: center;
					transition: all 0.1s ease-in-out;

					.zhuan {
						display: flex;
						flex-direction: column;
						align-items: center;
						height: 120rpx;
						background-color: transparent;
						color: white;
						width: 80rpx;
						position: relative;

						.image3 {
							position: absolute;
							top: 0;
							width: 70rpx;
							height: 70rpx;
						}

						.text3 {
							margin-top: 70rpx;
							font-size: 28rpx;
							width: 70rpx;
						}
					}

					.view2 {
						display: flex;
						flex-direction: column;
						align-items: center;
						height: 120rpx;
						width: 80rpx;
						position: relative;


						.image5 {
							position: absolute;
							top: 0;
							width: 70rpx;
							height: 70rpx;
						}

						.text6 {
							margin-top: 70rpx;
							font-size: 28rpx;
						}
					}

					// 头像
					.touX {
						position: relative;
						width: 100rpx;

						.image6 {
							border: 2px solid white;
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
						}

						.touX_jia1 {
							// background-color: #fe3665;
							border-radius: 40rpx;
							position: absolute;
							left: 50%;
							bottom: 5rpx;
							line-height: 40rpx;
							transform: translateX(-40%);
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 100rpx;
								height: 40rpx;
							}
						}

						.touX_jia {
							background-color: #fe3665;
							width: 60rpx;
							height: 40rpx;
							border-radius: 40rpx;
							position: absolute;
							left: 50%;
							bottom: 15rpx;
							line-height: 40rpx;
							transform: translateX(-50%);
							display: flex;
							align-items: center;
							justify-content: center;

							.text4 {
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								width: 25rpx;
								height: 25rpx;
							}

							text {
								font-size: 20rpx;
							}
						}
					}
				}

			}

			// 评论框
			.footer_ping {
				width: 100%;
				height: 0;
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 20;
				background-color: white;
				border-radius: 40rpx 40rpx 0 0;
				box-shadow: 0 -0.5px 5px aliceblue;
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				transition: all 0.5s ease-in-out;
				overflow: hidden;

				// 评论条数
				.nums {
					width: 100%;
					padding: 20rpx 0;
					height: 82rpx;
					text-align: center;
					position: sticky;
					top: 0;
					z-index: 10;
					background-color: white;
				}


				// 评论主体
				.ping_box {
					width: 100%;
					height: calc(100% - 100rpx - 82rpx);
					overflow: auto;

					.footer_ping_text {
						width: 100%;
						padding: 15rpx 40rpx;
						display: flex;

						.image_view {
							width: 100rpx;
							height: 100rpx;
							flex-shrink: 0;
							margin-right: 20rpx;

							.image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.text_view {
							display: flex;
							flex-direction: column;
							width: 100%;
							padding-bottom: 40rpx;
							border-bottom: 0.1rpx solid #f6f6f6;

							.text_view_top {
								margin-bottom: 10rpx;
								font-weight: 500;

								.text {
									font-size: 28rpx;
								}

								.text_name {
									color: #afafaf;
								}

								.text_autor {
									background-color: #fe3665;
									color: white;
									height: 10rpx;
									padding: 0 8rpx;
									font-size: 22rpx;
									border-radius: 5rpx;
									text-align: center;
									line-height: 10rpx;
									margin-left: 8rpx;
								}
							}

							.text_view_footer {
								max-height: 125rpx;
								overflow: auto;
							}
						}

						.text_view1 {
							display: flex;
							flex-direction: column;
							width: 100%;
							padding-bottom: 40rpx;

							.text_view_top {
								margin-bottom: 10rpx;
								font-weight: 500;

								.text {
									font-size: 28rpx;
								}

								.text_name {
									color: #afafaf;
								}

								.text_autor {
									background-color: #fe3665;
									color: white;
									height: 10rpx;
									padding: 0 8rpx;
									font-size: 22rpx;
									border-radius: 5rpx;
									text-align: center;
									line-height: 10rpx;
									margin-left: 8rpx;
								}
							}

							.text_view_footer {
								max-height: 125rpx;
								overflow: auto;
							}
						}
					}

				}

				// 发表评论
				.setPing {
					display: flex;
					width: 100%;
					height: 100rpx;
					justify-content: space-between;
					align-items: center;
					padding: 10rpx 15rpx;
					position: absolute;
					bottom: 0;
					z-index: 10;
					background-color: white;

					input {
						width: 70%;
						border-radius: 50px;
						background-color: #f4f4f4;
						padding: 20rpx;
						transition: all 0.5s ease-in-out;
					}

					button {
						height: 80rpx;
						line-height: 80rpx;
						background-color: #fe3665;
						color: white;
						transition: all 0.5s ease-in-out;
						overflow: hidden;
						margin: 0;
						flex-shrink: 0;
					}
				}
			}
		}
	}


	// 隐藏动画
	.opacitys {
		opacity: 0;
		transition: 1s linear all;
	}
</style>